<!-- 靠左地图工具栏 -->
<template>
  <div id="mapToolsId" class="map-tool" >
    <div class="inline-block box-shadow cursor-pointer l float-left" @click="gotoCenterClick" title="中心点"><i  class="iconfont icondingwei">
      <Icon type="md-locate" /></i>
    </div>
    <div class="inline-block box-shadow r float-left">
      <Dropdown  @on-click="changeMapClick">
        <Button type="text" size="small" >{{ customMap }}<Icon type="ios-arrow-down"></Icon></Button>
        <DropdownMenu slot="list">
          <DropdownItem
            :name="item.name"
            :disabled="item.disabled"
            :selected="item.selected"
            v-for="item in mapData.mainMenu" :key="item.name" >{{ item.desc }}</DropdownItem>
        </DropdownMenu>
      </Dropdown>
    </div>
    <div class="inline-block box-shadow r float-left">
        <Dropdown style="margin-left: 2px" @on-click="genMapTypeClick">
          <Button type="text" size="small">{{ mapType }}<Icon type="ios-arrow-down"></Icon></Button>
          <DropdownMenu slot="list">
            <DropdownItem
              :name="item.name"
              :disabled="item.disabled"
              :divided="item.divided"
              :selected="item.selected"
              v-for="item in mapData.subMenu" :key="item.name" >{{ item.desc }}</DropdownItem>
          </DropdownMenu>
        </Dropdown>
    </div>


    <div class="inline-block box-shadow r float-left">
      <div class="inline-block cursor-pointer f-p f">
        <Dropdown style="margin-left: 2px" @on-click="toolClick">
          <Button type="text" size="small" @click="toolEndClick">{{tool}}<Icon type="ios-arrow-down"></Icon></Button>
          <DropdownMenu slot="list">
            <DropdownItem
              :name="item.name"
              :disabled="item.disabled"
              v-for="item in mapData.toolsMenu" :key="item.name" >{{ item.desc }}</DropdownItem>
          </DropdownMenu>
        </Dropdown>

      </div>
    </div>
    <div class="inline-block box-shadow r float-left" @click="zoominClick">
      <div class="inline-block cursor-pointer f-p f">
        <i  class="iconfont icondingwei"><Icon type="md-add-circle" /></i>
        <span class="zoom-text">放大</span>
      </div>
    </div>

    <div class="inline-block box-shadow r float-left" @click="zoomoutClick">
      <div class="inline-block cursor-pointer f-p f">
        <i  class="iconfont icondingwei"><Icon type="md-remove-circle" /></i>
        <span class="zoom-text">缩小</span>
      </div>
    </div>

    <div class="inline-block cursor-pointer float-right  fullScreenBtn" @click="changeFullscreen">
      <span>全屏</span>
    </div>
  </div>
</template>
<script>
import MapToolsData from "@/view/Home/map/maptools/data/MapToolsData";
import MapInfo from "@/view/Home/map/maptools/data/MapInfo";
export default {
  name:"MenuTools",
  data(){
    return{
      current:null,
      currentTool:null,
      mapType:"类型",
      tool:"工具",
      mapToolsData: new MapToolsData(),
      mapData:{
        subMenu:null,
        mainMenu:null,
        toolsMenu:null,
      },
      customMap:"地图选择"
    }
  },
  mounted() {
    //动态 生成菜单项
    this.mapData.mainMenu = this.mapToolsData.getMapSource();
    this.mapData.toolsMenu = this.mapToolsData.getDrawTools();
  },
  methods:{
    /**
     * 主地图切换
     */
    changeMapClick(menuName) {
      //判断是否点击已选择的这个
      console.log(">>>>>>>> MenuTools.changeMapClick(): memuName=%o",menuName);
      for (let i in this.mapData.mainMenu) {
        if (this.mapData.mainMenu[i].name === menuName && this.mapData.mainMenu[i].selected == true) {
          return;
        }
      }
      const menuData = this.changeMenu(menuName);
      if (!!menuData){
        this.$emit('mapMenuclick', menuData)
      }

    },
    /**
     * 切换地图类型
     * @param menuName
     */
    genMapTypeClick(menuName){
      console.log(">>>>>>>>> MenuTools.genMapTypeClick  menuName=%o",menuName);
      const subData = this.changeSubMenu(menuName);
      console.log(">>>>>>>>> MenuTools.genMapTypeClick  subData=%o",subData);
      if (!!subData){
        this.$emit('mapMenuclick', subData)
      }

    },
    /**
     *反向选择设备菜单
     */
    changeMenu(menuName,subMenuName){
      //console.log("menuName,subMenuName: %o,%o",menuName,subMenuName);
      let subData=null;
      this.mapData.subMenu=[];
      let items = this.mapData.mainMenu;

      for(let i in items){
        items[i].selected=false;
        if (items[i].name == menuName){
          if (!!items[i].sub){
            for(let j in items[i].sub){
              this.mapData.subMenu.push(items[i].sub[j]);
              if (!!!subMenuName && j==0){
                subMenuName = items[i].sub[j].name;
              }
            }
          }else{
            subData={name: items[i].name,map:items[i]};
            if (!!items[i].url){subData.url=items[i].url;}
          }
          items[i].selected = true;
          this.customMap=items[i].desc;
          this.current = items[i];
        }
      }
      if (!!subMenuName){
        return this.changeSubMenu(subMenuName);
      }else if (!!subData){
        //如百度地图
        subData.mapName=this.customMap;
        subData.mapType="";
        new MapInfo().set(menuName);
        return subData;

      }
    },
    /**
     * 菜单类型点击
     * @param subMenuName
     */
    changeSubMenu(subMenuName){
      let subMenus = this.mapData.subMenu;
      //判断是否点击已选择的这个
      for(let i in subMenus){
        if (subMenus[i].name === subMenuName && subMenus[i].selected == true){
          return null;
        }
      }

      let subData=null;
      for(let i in subMenus){
        if (subMenuName == subMenus[i].name){
          /** 换地图 */
          subMenus[i].disabled = true;
          subMenus[i].selected = true;
          this.mapType=subMenus[i].desc;
          subData={name: subMenus[i].name,map:this.current};
          if (!!subMenus[i].url){subData.url=subMenus[i].url;}
        }else{
          subMenus[i].disabled = false;
          subMenus[i].selected = false;
        }
      }
      if (!!subData) {
        subData.mapName=this.customMap;
        subData.mapType=this.mapType;
        new MapInfo().set(this.current.name,subMenuName);
        return subData;

      }
    },

    /**
     * 放大
     */
    zoominClick(){
      this.$emit('zoominclick', null)
    },
    /**
     * x缩小
     */
    zoomoutClick(){
      this.$emit('zoomoutclick', null)
    },

    toolClick(name){
      //判断是否是测距
      this.currentTool = null;
      if (name == "DISTANCE"){
        for(let i in this.mapData.toolsMenu){
          if (this.mapData.toolsMenu[i].name == name){
            this.currentTool = this.mapData.toolsMenu[i];
            this.tool = this.currentTool.desc + "结束";
          }
          this.mapData.toolsMenu[i].disabled = true;
        }

      }
      this.$emit('toolclick', name)
    },
    toolEndClick(name){
      if (!!this.currentTool){
        for(let i in this.mapData.toolsMenu){
          this.mapData.toolsMenu[i].disabled = false;
        }
        this.$emit('toolendclick', this.currentTool.name);
      }
      this.currentTool = null;
      this.tool = "工具";
    },
    /**
     * 全屏
     */
    changeFullscreen(){
      this.$emit('fullscreenclick', null)
    },
    gotoCenterClick(){
      this.$emit('centerClick', null);
    }
  }
}
</script>
<style lang="less" >

/*地图工具栏*/
.map-tool{
  position: absolute;
  top: 65px;
  left: 0;
  -webkit-transition: left .1s;
  transition: left .1s;
  z-index: 100;
  .l{
    padding: 6px;
    //background: #fff;
    background: rgba(0, 21, 41, 0.70);
    border-radius: 3px;
  };
  .box-shadow {
    -webkit-box-shadow: 0 0 5px 0 rgba(0,0,0,0.24);
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.24);
  }
  .cursor-pointer{
    cursor: pointer;
  }
  .inline-block{
    display: inline-block;
  }
  .float-left {
    float: left;
  };
  .float-right {
    float: right;
  }
  .icondingwei {
    font-size: 12px;
    color: #0078ff;
    background: transparent;
    //background: rgba(0, 21, 41, 0.70);
  }
  .iconfont {
    font-family: iconfont!important;
    font-size: 12px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .r {
    height: 32px;
    padding: 5px;
    //background: #fff;
    background: rgba(0, 21, 41, 0.70);
    font-size: 12px;
    border-radius: 5px;
    font-family: SimSun;
    margin-left: 10px;
    .f-p{
      padding-left: 2px;
    }
    .f {
      border-right: 2px dotted #ccc;
      margin: 0 5px;
      padding-right: 7px;
    }
    .zoom-text {
      position: relative;
      top: -2px;
      margin: 0 3px;
      color: #eaeef5;
      line-height: 20px;
    }
  }
  .fullScreenBtn{
    width: 60px;
    height: 32px;
    line-height: 36px;
    margin-left: 10px;
    background-image: -webkit-gradient(linear,left top,right top,from(#0093f1),to(#1d78ed));
    background-image: linear-gradient(90deg,#0093f1,#1d78ed);
    border-radius: 6px;
    color: #fff;
    text-align: center;
    z-index: 100;
  }
}
/* 地图类型 */
.sub-map-type{
  position: absolute;
  top: 130px;
  left: 0px;
  z-index: 98;
  .btn-panel {
    cursor: pointer;
    //width: 48px;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    /*background: #2d8cf0;*/
    background-color: rgb(5, 31, 112);
    transition: all 0s;
  }
  height: 48px;
  //width: 480px;
}
</style>

<style lang="less" scoped>
//改变IVIEW组件的样式
.ivu-btn-text {
  color: #c9ced9;
  background-color: transparent;
  border-color: transparent;
}
.ivu-btn:hover{
  background-color: #860ba8;
  color: #FFFFFF;
}
.ivu-dropdown-item {
  color: #f0f1f5;
}
.ivu-dropdown-item:hover{
  //color: #515a6e;
  background: #860ba8;
  color: #FFFFFF;
}
.ivu-dropdown-menu {
  background: rgba(0, 21, 41, 0.70);
}
.ivu-select-dropdown {
  background-color: #000111;
}
.ivu-dropdown-item-selected, .ivu-dropdown-item.ivu-dropdown-item-selected:hover {
  background: #a1b9e0;
  color: #212121;
}
</style>
